<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span>云资源运营审计</span>
            </div>
            <el-table :data="tableData" height="calc(100vh - 240px)">
                <el-table-column prop="regionName" label="资源池名称" align="center">
                </el-table-column>
                <el-table-column prop="regionParent" label="资源池所属省份" align="center">
                </el-table-column>
                <el-table-column prop="regionType" label="资源池类型" align="center">
                </el-table-column>
                <el-table-column prop="multiZones" label="是否多可用区资源" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" disable-transitions>{{ scope.row.multiZones === true ? '是' : '否' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="zoneList" label="可用区列表" align="center">
                    <template slot-scope="scope">
                        <el-tag v-for="(item, index) in scope.row.zoneList" :key="index">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click="getDetail(scope.row.regionID)" type="primary" size="small">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                @pagination="getTableData()" />
        </el-card>

        <el-dialog title="详情" :visible.sync="dialogTableVisible">
            <el-table :data="detailData" height="calc(100vh - 300px)">
                <el-table-column property=" name" label="可用区名称" align="center"></el-table-column>
                <el-table-column property="azDisplayname" label="可用区显示名称" align="center"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    getMonitorRunList,
    getMonitorRunDetail
} from "@/api/monitor/operlog";
export default {
    data() {
        return {
            dialogTableVisible: false,
            // 总条数
            total: null,
            //分页
            pageSize: 10,
            pageNum: 1,
            // 显示搜索条件
            showSearch: true,
            tableData: [],
            detailData: []
        }
    },
    methods: {
        getList() {
            getMonitorRunList().then(res => {
                if (res) {
                    this.tableData = res.rows;
                    this.total = res.total
                    this.getTableData();
                }
            })
        },
        //分页获取数据
        getTableData() {
            this.tableData = this.tableData.slice(
                (this.pageNum - 1) * this.pageSize,
                this.pageNum * this.pageSize
            );
        },
        async getDetail(id) {
            this.dialogTableVisible = true
            let res = await getMonitorRunDetail({ regionID: id })
            let { code, rows } = res
            if (code == 200) {
                this.detailData = rows
            }
        },

    },
    //初始化数据
    created() {
        this.getList();
    },
}
</script>

<style lang="scss" scoped></style>